<template>
  <div v-loading="loading">
    <div style="margin:20px 0 15px 0">
      <e-container>
        <div style="margin:10px 0 0 0">
            <div class="info-header">
              <span class="info-title">旅游资讯 \ TRAVEL NEWS</span>
            </div>
          <div class="title2">CITY SOUNDS, REAL-TIME SCENE PUSH NOTIFICATIONS</div>
          <form action="javascript:;" @submit="searchSubmit" class="form-search">
              <div class="search-bar">
                <div class="search-radio">
                  <a href="javascript:;" @click="selectRadio('kind', '')" :class="{ active: !search.kind }">全部</a>
                  <a href="javascript:;" v-for="r in mapnewskind3" @click="selectRadio('kind', r.id)"
                    :class="{ active: search.kind == r.id }" v-text="r.name"></a>
                </div>
                <el-input class="info-search-input" type="text" v-model="search.title" placeholder="请输入关键词"></el-input>
                <div class="sousuobutton">
                    <el-button type="success" icon="el-icon-search" @click="searchSubmit"></el-button>
                </div>
              </div>
            </form>

            <div class="news-list">
              <router-link v-for="r in list" :key="r.id" :to="'/newsdetail?id=' + r.id" class="news-item">
                <img :src="r.photo" alt="news image" class="news-image">
                <div class="news-content">
                  <h3>{{ r.title }}</h3>
                  <p class="clamp-text" v-html="stripHtml(r.content)"></p>
                </div>
                <div class="news-meta">
                  <span>添加人: {{ r.admin }}</span>
                  <span>点击率: {{ r.clicks }}</span>
                  <span>分类: <e-select-view module="newskind" :value="r.kind" select="id" show="name"></e-select-view></span>
                </div>
                <div class="plus-icon">+</div>
              </router-link>
<!--                <e-news-list v-for="r in list" :key="r.id" :to="'/newsdetail?id=' + r.id" :title="r.title"-->
<!--                :description="r.content" :len="80" :image="r.photo">-->
            </div>
            <div class="pagination-container">
              <el-pagination @current-change="loadList" :current-page="page" :page-size="15"
                layout="total, sizes, prev, pager, next, jumper" :total="totalCount"></el-pagination>
            </div>
        </div>
      </e-container>
    </div>
  </div>
</template>

<style type="text/scss" scoped lang="scss">
.title2 {
  margin-bottom: 0.5%;
  color: #8c8c8c;
  text-align: center;
  font-size: 17px;
  width: 100%;
}

::v-deep button {
  border-radius: 35px;
  -webkit-appearance: button;
  background-color: #7fabbe;
  border-color: #7fabbe;
}

::v-deep button:hover {
  background-color: #b3cdd8;
  border-color: #b3cdd8;
}

::v-deep button:active {
  background-color: #7fabbe;
  border-color: #7fabbe;
}

::v-deep button:focus {
  background-color: #7fabbe;
  border-color: #7fabbe;
}

.form-search {
  padding-left: 5%;
  border-bottom: 1.5px solid #DCDFE6;
  margin-top: 20px;
  margin-bottom: 20px;
}

.search-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  margin-left: 5%;
  margin-right: 5%;
}

.search-radio {
  display: flex;
  align-items: center;
  font-family: monospace;

  a {
    font-size: 17px;
    font-family: monospace;
    display: inline-block;
    padding: 8px 10px;
    margin-right: 15px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
  }

  a.active {
    background: #7fabbe;
    color: #ffffff;
  }

  a:hover {
    background: #7fabbe;
    color: #ffffff;
  }
}

.info-search-input {
  width: 100px;
  flex-grow: 1;
  margin-left: 15%;
  margin-right: 0.5%;
}

.info-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
  display: block;
}

.info-header {
  text-align: center;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px 8px 0 0;
}

.news-list {
  padding-right: 3%;
  padding-left: 3%;
  margin-bottom: 30px;
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 4%;
}

.news-item {
  border-radius: 5px;
  height: 325px;
  width: 22%;
  border: 1px solid #ddd;
  overflow: hidden;
  transition: box-shadow 0.3s, background-color 0.3s, color 0.3s;
  text-decoration: none;
  color: inherit;
  border-right: 3px solid #DCDFE6;
  border-bottom: 3px solid #DCDFE6;
  position: relative;
  box-shadow: 5px 3px 10px rgba(0, 0, 0, 0.2);
}




.news-item:hover {
  border-radius: 0 0 25px 0;
  box-shadow: 14px 11px 10px rgba(0, 0, 0, 0.1);
  //background-color: #99bccb;
  color:#99bccb;
}

.news-item:hover .news-content h3,
.news-item:hover .news-content p,
.news-item:hover .news-meta span {
  //color: white;
}

.news-image {
  width: 100%;
  height: 40%;
  object-fit: cover;
}

.news-content {
  padding: 10px;
  text-align: center;
}

.news-content h3 {
  text-align: center;
  font-size: 18px;
}

.news-content p {
  font-size: 14px;
  color: #666;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 显示两行 */
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-meta {
  padding: 10px;
  text-align: center;
  font-size: 12px;
  color: #999;
  border-top: 1px solid #ddd;
}

.plus-icon {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 20px;
  height: 20px;
  background-color: white;
  color: #7fabbe;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  transform: translate(50%, 50%);
  border-radius: 3px;
}

.news-item:hover .plus-icon {
  height: 10%;
  width: 15%;
  background-color:#8c8c8c;
  color: white;
}

.pagination-container {
  margin-top: 10px;
  text-align: center;
  background-color: white;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px 8px 0 0;
}

::v-deep .e-container {
  padding-bottom: 1%;
  width: 1200px;
  margin: 0 auto;
}
</style>


<script>
import api from '@/api';
import { extend } from '@/utils/extend';
import objectDiff from 'objectdiff';

export default {
  data() {
    return {
      loading: false,
      list: [],
      search: {
        title: '',
        kind: '',
        photo: '',
        admin: '',
        clicks_start: '',
        clicks_end: '',
        content: '',
        addtime: '',
      },
      page: 1,
      pagesize: 12,
      totalCount: 0,
      total: {},
      mapnewskind3: [],
    }
  },
  methods: {
    stripHtml(html) {
      let div = document.createElement("div");
      div.innerHTML = html;
      return div.textContent || div.innerText || "";
    },
    searchSubmit() {
      this.saveSearchToCookie();
      this.loadList(1);
    },
    loadList(page) {
      if (this.loading) return;
      this.loading = true;
      this.page = page;

      const filter = extend(true, {}, this.search, { page: page + "", pagesize: this.pagesize + "" });
      
      this.$post(api.news.weblist, filter).then(res => {
        this.loading = false;
        if (res.code === api.code.OK) {
          extend(this, res.data);
        } else {
          this.$message.error(res.msg);
        }
      }).catch(err => {
        this.loading = false;
        this.$message.error(err.message);
      });
    },
    selectRadio(target, name) {
      this.search[target] = name;
      this.searchSubmit(1);
    },
    saveSearchToCookie() {
      document.cookie = `search=${encodeURIComponent(JSON.stringify(this.search))}; path=/;`;
    },
    loadSearchFromCookie() {
      const name = "search=";
      const decodedCookie = decodeURIComponent(document.cookie);
      const ca = decodedCookie.split(';');
      for (let i = 0; i < ca.length; i++) {
        let c = ca[i].trim();
        if (c.indexOf(name) === 0) {
          return JSON.parse(c.substring(name.length, c.length));
        }
      }
      return {};
    }
  },
  beforeRouteUpdate(to, from, next) {
    // 确保路由更新时不包含查询参数
    if (to.query && Object.keys(to.query).length > 0) {
      this.$router.replace({ path: to.path, query: {} });
    }
    next();
  },
  created() {
    // 从 cookie 中加载搜索状态
    this.search = this.loadSearchFromCookie();
    this.loadList(this.page);
  },
}
</script>
